<template>
	<view class="strategy">
		<view class="strategy-header sticky">
			<image class="absolute" src="https://ryyf.wangjintech.cn/static/image/stragy/0.png" />
		</view>
		<view class="relative zi2 qqGroup">QQ交流群457572422</view>
		<view class="relative zi2 search">
			<up-search placeholder="请输入要搜索的内容" :showAction="false" v-model="params.content" @search="search"
				@change="searchChange"></up-search>
		</view>

		<view class="strategy-main relative zi2">
			<up-empty v-if="result.list.length === 0" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
			</up-empty>
			<view class="item border-box" v-for="item in result.list" :key="item.id">
				<postUser :item="item" @changeFollowStatus="changeFollowStatus" />
				<up-gap height="20rpx"></up-gap>
				<postIndex :showImg="false" :item="item" @changeCollectStatus="changeCollectStatus"
					@changeGoodStatus="changeGoodStatus" />
			</view>
		</view>
		<view class="v-button fixed sumbit zi2" style="bottom: 220rpx;" @click="create">发布攻略</view>
		<up-back-top :scrollTop="scrollTop" :iconStyle="iconStyle" :duration="200" :bottom="160"></up-back-top>
		<up-gap height="300rpx"></up-gap>
		<tabbar :current="1" />
	</view>
</template>

<script setup>
	import postUser from "@/components/post/user.vue"
	import postIndex from "@/components/post/index.vue"
	import tabbar from '@/components/tabbar.vue';
	import openApi from "@/api/biz/open";
	import {
		notLogged
	} from "@/utils/tool.js"
	import {
		reactive,
		ref
	} from "vue"
	import {
		onShow,
		onPageScroll,
		onReachBottom
	} from "@dcloudio/uni-app"

	function changeFollowStatus(id) {
		let index = result.list.findIndex(item => item.id === id);
		result.list[index].followStatus = !result.list[index].followStatus
	}

	function changeGoodStatus(id) {
		let index = result.list.findIndex();
		if (result.list[index].goodStatus) result.list[index].goodCount--;
		else result.list[index].goodCount++;
		result.list[index].goodStatus = !result.list[index].goodStatus
	}

	function changeCollectStatus(id) {
		let index = result.list.findIndex(item => item.id === id);
		if (result.list[index].collectStatus) result.list[index].collectCount--;
		else result.list[index].collectCount++;
		result.list[index].collectStatus = !result.list[index].collectStatus
	}

	const create = () => {
		if (!uni.getStorageSync('accessToken')) return notLogged()
		uni.navigateTo({
			url: "/strategy/create/index"
		})
	}

	const iconStyle = {
		fontSize: '32rpx',
		color: '#2979ff'
	};
	const scrollTop = ref(0);

	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	})

	onReachBottom(() => {
		if (result.list.length >= result.total) return;
		params.pageNo++;
		page()
	})

	function searchChange() {
		if (!params.content.trim()) search()
	}

	function search() {
		params.pageNo = 1;
		page()
	}

	const result = reactive({
		list: [],
		total: 0
	})
	const params = reactive({
		pageNo: 1,
		content: ""
	})

	function page() {
		openApi.getStrategyPage({
			...params,
			pageSize: 10,
			type: 2
		}).then((res) => {
			if (res.code === 0) {
				result.total = res.data.total;
				if (params.pageNo === 1) result.list = res.data.list;
				else result.list = result.list.concat(res.data.list)
			}
		})
	}

	onShow(() => {
		page()
	})
</script>

<style>
	page {
		background-color: #1B1829;
	}
</style>
<style scoped lang="scss">
	.qqGroup {
		text-align: center;
		color: #fff;
		padding-bottom: 30rpx;
		font-weight: 500;
		font-size: 30rpx;
	}

	.search {
		margin: 0rpx auto;
		width: 690rpx;
	}

	.strategy-main {
		.item {
			width: 690rpx;
			background: #25223B;
			border-radius: 16rpx;
			padding: 30rpx 20rpx 25rpx;
			margin: 30rpx auto 0;
		}
	}

	.strategy-header {
		top: 0;
		width: 750rpx;
		height: 380rpx - 40rpx;

		image {
			left: 0;
			top: 0;
			width: inherit;
			height: 744rpx;
		}
	}
</style>